<style lang="less" scoped>
.cf {
  clear: both;
}
.noDate_page {
  padding-top:2rem;
}
</style>

<!--司机端提货签收列表页-->
<template>
	<div class="gridContainer">
    <manage-header></manage-header>
    <header-car :status="2"></header-car>


    <scroller class="mainScroller" lock-x scrollbar-y use-pullup :height="scrollerHeight" v-if="totalRecords > 0" :pullup-config="ScrollerConfig" ref="Scroller">
      <div>
        <div class="acpt-list" v-for="(item, i) in datas">

          <div class="car-pc-title cf listing">
            <span class="f-l"><i class="llse llse-huoche"></i> <b class="atvno">{{item.ATVNo}}</b></span>
            <!-- <em class="f-r"><div class="btn ml10" @click="bindGPS(item.ATVGuid, item.ATVNo)" style="font-size:11px; padding:0 3px">GPS绑定</div></em> -->
            <em class="f-r"><div class="btn ml10" @click="drawAll(item.Guid)" style="font-size:11px; padding:0 3px">整车提货</div></em>
          </div>
          
          <div class="acpt-list">
            <div class="acpt-list-wrap" :id="`g${i}-${index}`" v-for="(bbitem, index) in item.list" :class="index+1 === item.list.length?'mb30':'lineb-dash'">
              <div class="acpt-list-head cf">
                <span class="txt f-l">业务单号：{{bbitem.BBillNo}}</span>
              </div>
              <div class="displayflex acpt-list-body lineb">
                <span class="cargo">
                  <i class="iconfont icon-cargo"></i>
                  <p>{{bbitem.Pkgs}}件</p>
                </span>
                <div class="txt flex1">
                  <p class="ft17">{{bbitem.PickContacts}} {{bbitem.PickContactsTel}}</p>
                  <p>取货地址：{{bbitem.DepartureCity | city}}{{bbitem.DepartureDistrict | district}}{{bbitem.DepartureAddress}}</p>
                  <p>送货地址：{{bbitem.ArrivalCity | city}}{{bbitem.ArrivalDistrict | district}}{{bbitem.ArrivalAddress}}</p>
                </div>
              </div>
              <!-- <div class="btn-grp txt-rit">
                <div class="btn ml10" @click="viewOrderDetail(bbitem.BBillGuid)">详情</div>
                <div class="btn ml10" @click="carPickUpCheck(bbitem.BBillNo, bbitem.Guid)">提货</div>
                <div class="btn ml10 red" @click="cancelOrder(bbitem.Guid, bbitem.RowNo, i, index)">取消</div>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </scroller>

    <div class="noDate_page" v-if="totalRecords == 0">
			<div class="noDate_icon"><i class="iconfont icon-null"></i></div>
			暂无数据，请通知所属公司派单！
		</div>
    <div class="w100fix"></div>
    <footer-menu :status='1'></footer-menu>
  </div>
</template>

<script>
import manageHeader from "@/components/core/header/manage.header.vue";
import headerCar from '@/components/core/header/driver-progress.vue'
import footerMenu from "@/components/core/footer/manage.footer.vue";
import { mapGetters, mapState } from "vuex";

export default {
  components: {
    footerMenu, 
    headerCar,
    manageHeader,
  },
  data() {
    return {
      datas:[
        {
          ATVNo:'',
          AtvGuid:'',
          list:[],
        }
      ],

      totalRecords:0,
      noMore:false,
      ScrollerConfig: {
        content: "",
        downContent: "",
        height: 0,
        loadingContent: "",
        upContent: ""
      }
    }
  },
  computed:{
    userinfo(){
      return localStorage.userinfo?JSON.parse(localStorage.userinfo):null
    },
    ...mapState({
      pagetitle: state => state.cfg.appBarTitle,
      showstate: state => state.cfg.showAppBar,
    }),
    ...mapGetters({
      scrollerHeight: "cfg/getConHeight"
    }),
  },
  created(){
    this.getData();
  },
  mounted(){
    this.$store.dispatch("cfg/setConHeight");
  },
  methods: {
    getData(fromDelete, DomH){
      let query = {
        DriverGuid: this.userinfo.StaffID,
        State: "51",
        Grouped:"Y"
      };
      this.Ajax.post("GetDriverOrderList", query).then(resp => {
        if (resp.IsSuccess) {
          this.totalRecords = resp.TotalRecords;
          if (resp.Datas && resp.Datas.length > 0) {
            let map = {},
                args = [];
            resp.Datas.forEach((x) => {
              if(!map[x.ATVNo]){
                args.push({
                  ATVNo: x.ATVNo,
                  ATVGuid: x.AtvGuid,
                  Guid: x.Guid,
                  list: [x]
                });
                map[x.ATVNo] = x;
              } else {
                for(var i = 0; i < args.length; i++){
                  if(args[i].ATVNo == x.ATVNo){
                    args[i].list.push(x);
                    break;
                  }
                }
              }
            })
            args = args.sort(by("ATVNo"));

            args.forEach(x => {
              x.list = x.list.sort(by('RowNo'));
            })

            this.datas = args;
            
            if(fromDelete === 'Y'){
              this.$nextTick(() => {
                this.$nextTick(() => {
                  let wh = document.getElementsByClassName('mainScroller')[0].offsetHeight,
                      lh = document.getElementsByClassName('xs-container')[0].offsetHeight,
                      lt = document.defaultView.getComputedStyle(document.getElementsByClassName('xs-container')[0], null).transform;
                  lt = lt.slice(7, lt.length - 1).split(', ')[5];
                  let top = Math.abs(lt) - DomH;
                  if(Math.abs(lt) + wh < lh) top = Math.abs(lt); 
                  if(top < 0) top = 0;
                  this.$refs.Scroller.reset({top:top},500,'ease');
                });
              });
            }
          }
        } else {
          this.Toast({
            message: "列表为空，请稍后刷新"
          });
        }
      });

      let by = function(name){
        return function(o, p){
          var a, b;
          if (typeof o === "object" && typeof p === "object" && o && p) {
            a = o[name];
            b = p[name];
            if (a === b) {
              return 0;
            }
            if (typeof a === typeof b) {
              return a < b ? -1 : 1;
            }
            return typeof a < typeof b ? -1 : 1;
          }
          else {
            throw ("error");
          }
        }
      };
    },

    cancelOrder(guid, rowNo, i ,index){
      let _this = this,
          DomH = document.getElementById(`g${i}-${index}`).offsetHeight;
      this.$vux.confirm.show({
        content: '确认取消订单？',
        onCancel () {
          return false;
        },
        onConfirm () {

          let query = {
            Guid: guid,
            RowNo: rowNo
          };
          _this.Ajax.post("DriverCancelOrder", query).then(resp => {
            if (resp.IsSuccess) {
              _this.Toast({
                message: "订单已取消",
              });
              _this.getData('Y', DomH);
            } else {
              _this.Toast({
                message: "操作失败，请重试"
              });
            }
          });
        }
      })
    },
    
    drawAll(guid){
      console.log(guid)
      this.$router.push({
        path:'/driver/drawAll',
        query:{
          Guid: guid
        }
      });
    },
    bindGPS(guid, ATVNo) {
      this.$router.push({
        path:'/scanBundle/scan',
        query:{
          Guid: guid,
          ATVNo: ATVNo,
        }
      });
    },
    draw(){
      this.$router.push({
        path:'/drawlist'
      });
    },

    viewOrderDetail(BBillGuid) {
      this.$router.push({
        path:'senddingdetailorder',
        query:{
          Guid: BBillGuid,
        }
      });
    },
    carPickUpCheck(BBillNo, AtvGuid) {
      this.$router.push({
        path:'carPickUpCheck',
        query:{
          BBillNo: BBillNo,
          AtvGuid: AtvGuid,
        }
      });
    },
  }
}
</script>